<!-- 在线走势 -->
<template>
  <div class="padding20">
    <!-- 在线走势 -->
    <div class="border-line">
      <el-form :model="data.query" :inline="true">
        <Operator ref="OperatorRef" @query="queryItem" />
        <!-- <GameItem ref="GameItemRef" @query="queryGame" /> -->
        <el-form-item label="日期时间：">
          <el-date-picker v-model="data.query.date" type="date" range-separator="-" placeholder="请选择时间"
            value-format="YYYY-MM-DD" clearable :disabled-date="indexStore.disabledDateTime"/>
        </el-form-item>
        <el-form-item>
          <el-button :disable="data.loadingChart" icon="Search" type="primary" @click="getTimeSearchList">查询</el-button>
          <el-button :disable="data.loadingChart" icon="Refresh" type="info" size="small" @click="onHideDetails(true)">重
            置</el-button>
        </el-form-item>
      </el-form>
      <div class="flex margin">
        <el-button :disable="data.loadingChart" :type="data.onlineName == '登录走势' ? 'danger' : 'info'"
          @click="handleClickOnline('登录走势')">登录走势</el-button>
        <el-button :disable="data.loadingChart" :type="data.onlineName == '在线走势' ? 'danger' : 'info'"
          @click="handleClickOnline('在线走势')">在线走势</el-button>
      </div>
      <div v-loading="data.loadingChart">
        <LargeCharts :chartTitle="data.onlineName" :xAxisData="data.onlineXAxis" :seriesData="data.onlineSeries" :position="data.position"/>
      </div>
    </div>
    <!-- 每日最高在线 -->
    <div class="border-line">
      <el-form :model="data.query" :inline="true">
        <el-form-item label="日期时间：">
          <el-date-picker v-model="data.topDate" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" clearable :disabled-date="indexStore.disabledDateTime"/>
        </el-form-item>
        <el-form-item>
          <el-button :disable="data.loadingHeightChart" icon="Search" type="primary"
            @click="getHeightSearchList">查询</el-button>
        </el-form-item>
      </el-form>
      <div v-loading="data.loadingHeightChart">
        <MultilineChart :chartTitle="data.loginName" :xAxisData="data.HeightXAxis" :seriesData="data.HeightSeries"
          :legendData="data.HeightLegend" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'

import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import GameItem, { type GameType } from '@/components/FormItem/GameItem.vue'
import LargeCharts from '@/components/Echarts/largeChart.vue'
import MultilineChart from '@/components/Echarts/multilineChart.vue'
import { getSevenWeek, getDateDay, setTimeDateValue, setTimeValue, setTimestampTime } from '@/utils/time'
import { throttle } from '@/utils/index'
import {
  getTimeOnline,
  getTimeLogin,
  getHeightOnline,
  getHeightLogin
} from '@/api/player'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    currency_id: -1,
    agent_id: -1,
    operated_id: -1,
    // platform: -1,
    // game_id: -1,
    date: getDateDay(0)
  },
  topDate: getSevenWeek(),
  list: [],
  total: 0,
  onlineName: '在线走势',
  loginName: '每日最高记录',
  onlineXAxis: [] as string[],
  onlineSeries: [] as number[],
  HeightXAxis: [] as string[],
  HeightSeries: [] as any[],
  HeightLegend: [] as string[],
  position: {type: 'inside', start: 0, end: 100},
  loadingChart: false,
  loadingHeightChart: false,
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}
// 游戏品牌 + 游戏
// const queryGame = (item: GameType) => {
//   data.query.platform = item.platform
//   data.query.game_id = item.game_id
// }

onMounted(async () => {
  getTimeSearchList()
  getHeightSearchList()
})

const getTimeSearchList = throttle(async () => {
  data.loadingChart = true
  data.onlineXAxis = []
  data.onlineSeries = []
  data.query = setTimeDateValue(data.query)
  let time = { data: [] };
  // 登录走势
  if (data.onlineName == '登录走势') {
    time = await getTimeLogin(data.query)
  } else {
    time = await getTimeOnline(data.query)
  }
  time.data?.forEach((item: { date: number, person: number }) => {
    data.onlineXAxis.push(setTimestampTime(item.date).substring(11, 16))
    data.onlineSeries.push(item.person)
  })
  data.loadingChart = false
}, 2000)

const getHeightSearchList = throttle(async () => {
  data.loadingHeightChart = true
  data.HeightXAxis = []
  data.HeightSeries = []
  let loginData = [] as number[], onlineData = [] as number[],dateData = [] as string[];
  data.topDate = setTimeValue(data.topDate)
  let [HeightOnline, HeightLogin] = await Promise.all([getHeightOnline(setTimeValue({ date: data.topDate })), getHeightLogin(setTimeValue({ date: data.topDate }))])
  // 每日最高在线
  HeightOnline.data?.forEach((item: { person: number; date: number }) => {
    dateData.push(setTimestampTime(item.date).substring(5, 11))
    onlineData.push(item.person)
  })
  // 每日总登录
  HeightLogin.data?.forEach((item: { person: number; date: number }) => {
    dateData.push(setTimestampTime(item.date).substring(5, 11))
    loginData.push(item.person)
  })
  data.HeightXAxis = [...new Set(dateData)]
  data.HeightSeries = [
    { name: '每日总登录', data: loginData, type: 'line' },
    {name: '每日最高在线', type: 'line', data: onlineData },
  ]
  data.HeightLegend = ['每日总登录', '每日最高在线']
  data.loadingHeightChart = false
}, 2000)

// 选择曲线图
const handleClickOnline = throttle((name: string) => {
  data.onlineName = name
  getTimeSearchList()
}, 1000)

// 重置
const OperatorRef = ref<any>()
const GameItemRef = ref<any>()
const onHideDetails = (show: boolean) => {
  if (show) {
    data.query = {
      currency_id: -1,
      agent_id: -1,
      operated_id: -1,
      // game_id: -1,
      // platform: -1,
      date: getDateDay(0)
    }
    OperatorRef.value.onHideDetails()
    GameItemRef.value.onHideDetails()
    getTimeSearchList()
  }
}
</script>

<style scoped lang="scss">
.margin {
  margin-top: -10px;
  margin-bottom: 20px;
}

.padding20 {
  background-color: var(--background);
}
</style>
